<template>
  <div>
<!--    <div class="background">-->
<!--      <img class="bgIMG" src="@/assets/img/bg/bg.png">-->
<!--    </div>-->
    <el-container style="height: 100%">
      <el-aside width="25%" style="padding-left: 10px;padding-top: 20px">
        <dv-border-box-11 style="height: 90%;;padding-bottom: 30px" title="能 耗 统 计" :color="['rgb(34,69,114)','rgb(4,17,53)']" backgroundColor="rgba(4,17,53,0.1)" >
            <div style="padding: 0px 20px -20px 20px">
                <alarm-data></alarm-data>
                <dv-decoration-5 style="width:100%;height:20px" :color="['rgb(34,69,114)','rgb(4,17,153)']"/>
            </div>
        </dv-border-box-11>
      </el-aside>
      <el-main style="width: 42%; height:75%; margin-top: 20px; padding: 0;">
        <dv-border-box-1 backgroundColor="rgba(4,17,53,0.1)" :color="['rgb(34,69,114)','rgb(4,17,53)']" >
          <alarm-contrast></alarm-contrast>
          <div style="margin: 25px 50px">
            <dv-decoration-6 style="width:100%;height:10px;" :color="['rgb(122,202,236)','rgb(34,69,114)']"/>
            <div class="empty-space"></div>
            <div class="empty-space"></div>
            <multi-bar-chart :bar-set="multiBar">
            </multi-bar-chart>
            <div class="empty-space"></div>
            <bar-chart :bar-set="singleBar"></bar-chart>
          </div>
        </dv-border-box-1>
      </el-main>
      <el-aside width="33%" style=";padding-top: 20px">
        <el-row>
          <dv-border-box-11 title="  66KV 和 全场 电能对比  " :color="['rgb(34,69,114)','rgb(4,17,53)']" backgroundColor="rgba(4,17,53,0.1)">
              <div style="padding: 20px 20px">
                  <pie-chart pieSet="pie"></pie-chart>
                  <dv-decoration-5 style="width:100%;height:30px" :color="['rgb(34,69,114)','rgb(4,17,153)']"/>
                  <line-chart :line-set="line"></line-chart>
                  <div class="empty-space"></div>
                  <line-bar-chart :bar-set="lineBar"></line-bar-chart>
                  <dv-decoration-5 style="width:100%;height:20px" :color="['rgb(34,69,114)','rgb(4,17,153)']"/>
              </div>
          </dv-border-box-11>
        </el-row>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import AlarmData from './component/alarmData'
import AlarmContrast from './component/alarmContrast'
import BarChart from './component/singleBarChart'
import MultiBarChart from './component/multiBarChart'
import LineChart from './component/lineChart'
import PieChart from './component/multiPieChart'
import LineBarChart from './component/lineBarChart'
export default {
  name: 'HomePage',
  components: {
    AlarmData,
    AlarmContrast,
    BarChart,
    MultiBarChart,
    LineChart,
    PieChart,
    LineBarChart
  },
  data () {
    return {
      singleBar:{
        barIndex:'1',
        title:'小时皮带秤计量',
        dataAxis:['5：00', '6：00', '7：00', '8：00', '9：00', '10：00', '11：00', '12：00', '13：00'],
        dataFrom:['4号皮带秤','18号皮带秤','19号皮带秤','21号皮带秤','11号皮带秤','精1皮带','精2皮带'],
        data:[[152.235, 600.00, 150.000, 100.00, 90.000, 110.000, 70.000, 150.000, 100.00],
            [100.00, 900.00, 152.235, 600.00, 500.00, 1100.00, 700.00, 150.000, 100.00],
            [600.00, 150.000, 1000.0, 900.00, 110.000, 152.235, 700.00, 150.000, 100.00],
            [152.235, 60.000, 15.0000, 100.00, 900.00, 110.000, 700.00, 150.000, 100.00],
            [700.00, 150.000, 100.00, 123, 600, 150.000, 100.00, 900.00, 1100.00],
            [152.235, 600.00, 150.000, 100.00, 900.00, 110.000, 700.00, 150.000, 100.00],
            [150.000, 10.000, 90.000, 235, 600.00, 110.000, 700.00, 150.000, 100.00],],
      },
      multiBar:{
        barIndex:'1',
        title:'近七天核心设备耗能',
        dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
        dataFrom:['破碎机(选矿厂)','竖井一号皮带机','高压碾磨机1号','1系列球磨机','高压碾磨机2号'],
        data:[152235, 60000, 150000, 10000, 90000, 110000, 70000],
      },
      lineBar:{
        barIndex:'1',
        title:'近七天产量能耗',
        dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
        dataFrom:['产量','能耗'],
        data:[152235, 60000, 150000, 10000, 90000, 110000, 70000],
      },
      line:{
        lineIndex:'1',
        title:'全场小时电能数据',
        dataAxis:['5：00', '6：00', '7：00', '8：00', '9：00', '10：00', '11：00', '12：00', '13：00'],
        dataFrom:['破碎机(选矿厂)','竖井一号皮带机','高压碾磨机1号','1系列球磨机','高压碾磨机2号'],
        data:[152235, 60000, 150000, 10000, 90000, 110000, 70000, 150000, 10000],
      },
      pie:{
        lineIndex:'1',
        title:'全场小时电能数据',
        dataAxis:['5：00', '6：00', '7：00', '8：00', '9：00', '10：00', '11：00', '12：00', '13：00'],
        dataFrom:['破碎机(选矿厂)','竖井一号皮带机','高压碾磨机1号','1系列球磨机','高压碾磨机2号'],
        data:[152235, 60000, 150000, 10000, 90000, 110000, 70000, 150000, 10000],
      }
    }
  }
}
</script>

<style scoped>
  .subTitle{
    font-size: 20px;
    text-align: center;
    margin: 0 20px;
    color: white;
  }
  .empty-space {
    width: 100%;
    height: 10px;
  }
  .background {
    width: 99%;
    height: 91%;
    background-repeat: no-repeat;
    filter: blur(8px);
    z-index: -1;
    position: absolute;
  }
  .bgIMG {
    width: 100%;
    height: 100%;
  }
</style>
